<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
     String path=request.getContextPath();
      String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="<%=basePath%>layui/css/layui.css" media="all"/>
<script src="<%=basePath%>layui/layui.js"></script>
</head>
<body>
<div class="demoTable">
  搜索订单：
  <div class="layui-inline">
   <input class="layui-input" name="oname" id="demoReload" autocomplete="off" >
   </div>
       订单总价： 
        <div class="layui-inline">
            <input type="text" name="oprice" id="demoReload1" class="layui-input">
        </div>
      开始时间:
         <div class="layui-inline">
            <input type="text" name="begintime2" id="demoReload2" class="layui-input">
        </div>
      结束时间
         <div class="layui-inline">
            <input type="text" name="endtime2" id="demoReload3" class="layui-input">
        </div>
  <button class="layui-btn" data-type="reload">搜索</button>
   </div>
<table id="demo" lay-filter="test"></table>
<!-- 增加 -->
<div class="site-demo-button" id="layerDemo1" style="margin-bottom: 0; display: none">
<form class="layui-form" action="" method="post">
  <div class="layui-form-item">
      <label class="layui-form-label">订单名称</label>
         <div class="layui-input-block">
            <input type="text" name="oname" required ay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
    <div class="layui-inline">
      <label class="layui-form-label">结束时间</label>
         <div class="layui-input-inline">
             <input type="text" name="endtime1" id="endtime1"   lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
   </div>>
   <div class="layui-form-item">
      <label class="layui-form-label">单位时间</label>
         <div class="layui-input-block">
            <input type="text" name="num" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
    <div class="layui-form-item">
      <label class="layui-form-label">订单总价</label>
         <div class="layui-input-block">
            <input type="text" name="oprice" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">订单状态</label>
    <div class="layui-input-block">
      <select name="ostate" lay-filter="aihao" id="msgType">
        <option value="">请选择</option>
        <option value="1">未支付订单</option>
        <option value="2">未完成订单</option>
        <option value="3">已完成订单</option>
        <option value="4">已支付订单</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">房屋名称</label>
    <div class="layui-input-block">
      <select name="homeid" lay-filter="aihao" id="homeid1">
        
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名称</label>
    <div class="layui-input-block">
      <select name="zuserid" lay-filter="aihao" id="zuserId">
       
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>

<!-- 修改 -->
<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0; display: none">
<form class="layui-form" action="" method="post">
<div class="layui-form-item">
         <div class="layui-input-block">
            <input type="hidden" name="oid" id="oid" required ay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
  <div class="layui-form-item">
      <label class="layui-form-label">订单名称</label>
         <div class="layui-input-block">
            <input type="text" name="oname" id="oname"required ay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-inline">
      <label class="layui-form-label">开始时间</label>
         <div class="layui-input-inline">
             <input type="text" name="begintime1" id="begintime1"   lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
   </div>
    <div class="layui-inline">
      <label class="layui-form-label">结束时间</label>
         <div class="layui-input-inline">
             <input type="text" name="endtime1" id="endtime2"   lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">单位时间</label>
         <div class="layui-input-block">
            <input type="text" name="num" id="num" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
    <div class="layui-form-item">
      <label class="layui-form-label">订单总价</label>
         <div class="layui-input-block">
            <input type="text" name="oprice" id="oprice" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">订单状态</label>
    <div class="layui-input-block">
      <select name="ostate" id="ostate">
        <option value="1">未支付订单</option>
        <option value="2">未完成订单</option>
        <option value="3">已完成订单</option>
        <option value="4">已支付订单</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">房屋名称</label>
    <div class="layui-input-block">
      <select name="homeid" lay-filter="aihao" id="homeId1">
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名称</label>
    <div class="layui-input-block">
      <select name="zuserid"  id="zuserid">
      </select>
    </div>
  </div>
  <div class="layui-inline">
      <label class="layui-form-label">支付时间</label>
         <div class="layui-input-inline">
             <input type="text" name="paytime1" id="paytime1"   class="layui-input">
        </div>
   </div>
   <div class="layui-inline">
      <label class="layui-form-label">评论时间</label>
         <div class="layui-input-inline">
             <input type="text" name="commtime1" id="commtime1"  class="layui-input">
        </div>
   </div>
   <div class="layui-inline">
      <label class="layui-form-label">完成时间</label>
         <div class="layui-input-inline">
             <input type="text" name="finishtime1" id="finishtime1"    class="layui-input">
        </div>
   </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="demo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">新增</button>
  </div>
</script> 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
function createTime(v){
	if(v!=null){
	var date = new Date(v);
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    m = m<10?'0'+m:m;
    var d = date.getDate();
    d = d<10?("0"+d):d;
    var h = date.getHours();
    h = h<10?("0"+h):h;
    var M = date.getMinutes();
    M = M<10?("0"+M):M;
    var str = y+"-"+m+"-"+d+" "+h+":"+M;
    return str;
	}else{
		return "";
	}
}
layui.use(['table','laydate'],function(){
	var table = layui.table;
	var $=layui.jquery;
	laydate = layui.laydate;
	table.render({
		toolbar: '#toolbarDemo',
	    elem: '#demo',
	    url: 'order/queryall', //数据接口
	    page: true, //开启分页
	    id:"testReload",
	    limit:10,
	    limits:[10,20,30,50],
	    cols:[[
             {type: 'checkbox', fixed: 'left'},
             {field:'oid', title: '订单id', width:100, sort: true, fixed: 'left'},
             {field:'oname', title: '订单名称', width:100},
             {field:'makedate', title: '生成时间', width:130,templet:function (d){
                 return createTime(d.makedate);
             }},
             {field:'begintime', title: '开始时间', width:130,templet:function (d){
                 return createTime(d.begintime);
             }},
             {field:'endtime', title: '结束时间', width:130,templet:function (d){
                 return createTime(d.endtime);
             }},
             {field:'num', title: '单位时间', width:100},
             {field:'oprice', title: '订单总价', width:100},
             {field:'ostate', title: '订单状态', width:100},
             {field:'title', title: '房屋名称', width:100},
             {field:'username', title: '用户名称', width:100},
             {field:'paytime', title: '支付时间', width:130,templet:function (d){
                 return createTime(d.paytime);
             }},
             {field:'commtime', title: '评论时间', width:130,templet:function (d){
                 return createTime(d.commtime);
             }},
             {field:'finishtime', title: '完成时间', width:130,templet:function (d){
                 return createTime(d.finishtime);
             }},
             {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	           ]],
	           done: function(res, page, count){
	   			//如果是异步请求数据方式，res即为你接口返回的信息。
	   			//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
	   			//分类显示中文名称
	        	   $("[data-field='ostate']").children().each(function(){
						if($(this).text()=='1'){
						   $(this).text("未支付订单")
						}else if($(this).text()=='2'){
						   $(this).text("未完成订单")
						}else if($(this).text()=='3'){
							$(this).text("已完成订单")
						}else if($(this).text()=='4'){
							$(this).text("已支付订单")
						}
		    });
	   			
	   	    }
	   	  });
	   table.on('toolbar(test)', function(obj){
	       var checkStatus = table.checkStatus(obj.config.id);
	       switch(obj.event){
	         case 'getCheckData':
	           var data = checkStatus.data;
	           layer.alert(JSON.stringify(data));
	         break;
	         case 'getCheckLength':
	           var data = checkStatus.data;
	           layer.msg('选中了：'+ data.length + ' 个');
	         break;
	         case 'isAll':
	           //layer.msg(checkStatus.isAll ? '全选': '未全选');
	           layui.use('layer', function(){
	           	  var layer = layui.layer;
	           	  var $=layui.jquery;
	           	      layer.open({
	           	          type: 1
	           	          ,offset:"auto" 
	           	          ,content: $("#layerDemo1")
	           	          ,area:"600px"
	           	          ,btn: '关闭全部'
	           	          ,btnAlign: 'c' //按钮居中
	           	          ,shade: 0 //不显示遮罩
	           	          ,yes: function(){
	           	            layer.closeAll();
	           	          }
	           	        });
	         
	            });
	         break;
	       };
	     });
	   //监听行工具事件
	   table.on('tool(test)', function(obj){
	     var data = obj.data;//当前行的数据
	     //obj.event:表头的参数对象值
	     if(obj.event === 'del'){
	       layer.confirm('真的删除行么', function(index){
	         $.ajax({
	       	  type:'post',
	       	  url:'order/del',
	       	  data:{"oid":data.oid},
	       	  success:function(msg){
	       		  layer.msg("删除成功");
	       			  table.reload('testReload', {
	       			        page: {
	       			          curr: 1 //重新从第 1 页开始
	       			        },
	       			      });
	       	  }
	         });
	         layer.close(index);
	       });
	     } else if(obj.event === 'edit'){
	    	 console.log(data);
	    	 $("#oid").val(data.oid);
	    	 $("#oname").val(data.oname);
	    	 //$("#begintime1").val(new Data(data.begintime));
	    	 $("#endtime2").val(data.endtime);
	    	 $("#num").val(data.num);
	    	 $("#oprice").val(data.oprice);
	    	 $("#ostate").val(data.ostate);
	    	 $("#homeId1").val(data.homeid);
	    	 $("#zuserid").val(data.zuserid);
	    	 $("#paytime1").val(data.paytime);
	    	 $("#commtime1").val(data.commtime);
	    	 $("#finishtime1").val(data.finishtime);
	    	 laydate.render({ 
	    		  elem: '#begintime1'
	    		  ,value: new Date(data.begintime) //参数即为：2018-08-20 20:08:08 的时间戳
	    		});
	    	 laydate.render({ 
	    		  elem: '#endtime2'
	    		  ,value: new Date(data.endtime) //参数即为：2018-08-20 20:08:08 的时间戳
	    		});
	    	 if(data.paytime){
	    	 laydate.render({ 
	    		  elem: '#paytime1'
	    		  ,value: new Date(data.paytime) //参数即为：2018-08-20 20:08:08 的时间戳
	    		});
	    		 
	    	 }
	    	 if(data.commtime!=null){
	    	 laydate.render({
	    		  elem: '#commtime1'
	    		  ,value: new Date(data.commtime) //参数即为：2018-08-20 20:08:08 的时间戳
	    	 
	    		});
	    		 
	    	 }
	    	 if(data.finishtime!=null){
	    		 
	    	 laydate.render({ 
	    		  elem: '#finishtime1'
	    		  ,value: new Date(data.finishtime) //参数即为：2018-08-20 20:08:08 的时间戳
	    		});
	    	 }
	       layui.use(['layer','form'], function(){
	       	  var layer = layui.layer;
	         var form = layui.form;
	       	  var $=layui.jquery;
	       	 layer.open({ 
	       		 type: 1
	       	
      	          ,offset:"auto" 
           	          ,content: $("#layerDemo")
           	          ,area:"600px"
           	          ,btn: '关闭全部'
           	          ,btnAlign: 'c' //按钮居中
           	          ,shade: 0 //不显示遮罩
           	          ,yes: function(){
           	      	 
           	            layer.closeAll();
           	          }
	       	 });
	       	form.render();
	       	      
	        }), 
	       function(value, index){
	       	layer.close(index);
	       };
	     }
	   });

	   var $ = layui.$, active = {
	   	    reload: function(){
	   	    	var oid=$("#demoReload").val();
	   	    	var oprice=$("#demoReload1").val();
	   	    	var begintime2=$("#demoReload2").val();
	   	    	var endtime2=$("#demoReload3").val();
	   	     table.reload('testReload', {
			        page: {
			          curr: 1 //重新从第 1 页开始
			        },where:{
			        	oname:oid,
			        	oprice1:oprice,
			        	begintime2:begintime2,
			        	endtime2:endtime2
			        }
			      });
	   	    }
	   	  };
	   $('.demoTable .layui-btn').on('click', function(){
	       var type = $(this).data('type');
	       active[type] ? active[type].call(this) : '';
	     });
});
layui.use(['form', 'upload','laydate'], function(){
	 var form = layui.form;
	 var $=layui.jquery;
	 upload = layui.upload;
	 laydate = layui.laydate;
	 laydate.render({
		    elem: '#endtime1'
		  });
	 laydate.render({
		    elem: '#endtime2'
		  });
	 laydate.render({
		    elem: '#begintime1'
		  });
	 laydate.render({
		    elem: '#paytime1'
		  });
	 laydate.render({
		    elem: '#commtime1'
		  });
	 laydate.render({
		    elem: '#finishtime1'
		  });
	 laydate.render({
		    elem: '#demoReload2'
		  });
	 laydate.render({
		    elem: '#demoReload3'
		  });
	   $(document).ready(function () {
	   $.ajax({
		   url:'user/select',
		   dataType:'json',
		   type:'post',
		   success:function(data){
			   $("#zuserId").empty();
			   $("#zuserid").empty();
			   var opt = "<option value='' selected = \'selected\'>选择</option>";
			   for(var i=0; i<data.length; i++){
				   var option="<option value=\""+data[i].userid+"\"";
				   option += ">"+data[i].username+"</option>"; //动态添加数据
				   $("#zuserId").append(option);
				   $("#zuserid").append(option);
				   }
			   form.render('select');
		   }
	   });
	   $.ajax({
		   url:'homeinfo/select',
		   dataType:'json',
		   type:'post',
		   success:function(data){
			   $("#homeid1").empty();
			   $("#homeId1").empty();
			   var opt = "<option value='' '>选择</option>";
			   $("#homeid1").append(opt);
			   for(var i=0; i<data.length; i++){
				   var option="<option value=\""+data[i].homeid+"\"";
				   option += ">"+data[i].title+"</option>"; //动态添加数据
				   $("#homeid1").append(option);
				   $("#homeId1").append(option);
				   }
			   form.render('select');
		   }
	   })
	   }); 
	   form.on('submit(demo1)',function(data){
			 
			 $.ajax({
				 type:"post",
				 data:data.field,
				 url:"order/add",
				 success:function(msg){
					 layer.msg(msg.msg);
				 }
			 })
		 });
	   form.on('submit(demo)',function(data){
			
			 $.ajax({
				 type:"post",
				 data:data.field,
				 url:"order/update",
				 success:function(msg){
					 layer.msg(msg.msg);
				 }
			 })
		 });
});
</script>
</body>
</html>